<template>
	<div class="completeInfo">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />
		<div class="content">
			<div class="loginBox">
				<div class="list">
					<div class="space">会员类型</div>
					<van-cell-group>
						<van-radio-group v-model="radio" direction="horizontal" checked-color="#fe7600">
							<van-radio name="2">业主会员
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon">
								</template>
							</van-radio>
							<van-radio name="3">物业会员
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
							<van-radio name="4">业委会会员
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
							<van-radio name="5">党建会员
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
							<van-radio name="6">政委会员
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
						</van-radio-group>


					</van-cell-group>
					<div class="space">性别</div>
					<van-cell-group>
						<van-radio-group v-model="radio2" direction="horizontal" checked-color="#fe7600">
							<van-radio name="0">男
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon">
								</template>
							</van-radio>
							<van-radio name="1">女
								<template #icon="props">
									<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
								</template>
							</van-radio>
						
						</van-radio-group>
					
					
					</van-cell-group>
					<div class="space">联系方式</div>
					<van-cell-group>
						<van-field v-model="twechat" clearable :left-icon="weixin" placeholder="请输入您的微信号码" />
						<van-field v-model="tqq" clearable :left-icon="QQ" placeholder="请输入您的QQ号码" />
						<van-field v-model="tdingding" clearable :left-icon="dingding" placeholder="请输入您的钉钉号" />
						<van-field v-model="temail" clearable :left-icon="email" placeholder="请输入您的邮箱" />
					</van-cell-group>
					<div class="button-login" @click="toCompleteInfo">提交</div>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import qq from "@/assets/img/QQ.png"
	import weixin from "@/assets/img/weixin.png"
	import email from "@/assets/img/email.png"
	import mobile from "@/assets/img/mobile.png"
	import dingding from "@/assets/img/dingding.png"
	import activeIcon from "@/assets/img/checkedstatus.png"
	import inactiveIcon from "@/assets/img/nochoose.png"

	export default {
		name: "completeInfo",
		components: {

		},
		data() {
			return {
				title: "完善信息",
				value: "",
				QQ: qq,
				weixin: weixin,
				email: email,
				mobile: mobile,
				dingding: dingding,
				radio: "2",
				radio2: "0",
				activeIcon: activeIcon,
				inactiveIcon: inactiveIcon,
				checked:false,
				registerData:{},
				twechat:'',
				tqq:'',
				temail:'',
				tdingding:'',
			}
		},
		mounted() {
			this.registerData = this.$localStorage.get("registerData")
		},
		methods: {
			
			back() {
				this.$router.go(-1)
			},

			toCompleteInfo() {
				this.$set(this.registerData,"group",this.radio)
				this.$set(this.registerData,"gender",this.radio2)
				this.$set(this.registerData,"qq",this.tqq)
				this.$set(this.registerData,"wechat",this.twechat)
				this.$set(this.registerData,"dingding",this.tdingding)
				this.$set(this.registerData,"email",this.temail)
				this.$api.login.register(this.registerData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$setcookie("userInfo",JSON.stringify(res.data.userinfo))
						this.$setcookie("jy_token",res.data.userinfo.token)
						this.$router.push({
							path: "/success"
						})
					}else{
						this.$toast.fail(res.msg)
					}
				})
				
			}
		}


	}
</script>

<style scoped lang="less">
	.completeInfo {
		padding-top: 46px;
		background: #fff;
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}

			.van-nav-bar__text {
				color: #5C5C5C;
			}
		}

		.content {
		


			.loginBox {
				background: rgba(255, 255, 255, 1);
				border-radius: 0.5rem;
				padding: 1rem 2.16rem;

				.list {
					.van-cell {
						height: 2.75rem;
						border: 1px solid rgba(229, 229, 229, 1);
						border-radius: 2rem;
						margin-bottom: 0.72rem;
						padding-left: 1.63rem;

						input {
							padding-left: 0.7rem;
							background: none;

							&::placeholder {
								font-size: 0.81rem;
								font-family: PingFang SC;
								font-weight: 500;
								color: rgba(204, 204, 204, 1);
							}

							&:focus {
								background-color: none;
							}
						}
					}

					.space {
						font-size: 0.81rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(38, 38, 38, 1);
						line-height: 0.75rem;
						padding: 1rem 0;
					}

					.img-icon {
						height: 1.25rem;
					}

					p {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(254, 118, 0, 1);
						line-height: 0.75rem;
						margin-bottom: 0.81rem;
						text-align: right;
					}

					.button-login {
						height: 2.75rem;
						background: rgba(254, 118, 0, 1);
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 2rem;
						margin-top: 2rem;

					}

					.toLogin {
						font-size: 0.88rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: #505050;
						line-height: 0.75rem;
						text-align: center;

						a {
							color: #FE7600;
						}
					}

					.button-register {
						height: 2.75rem;
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						border: 1px solid rgba(254, 118, 0, 1);
						font-weight: 500;
						color: #FE7600;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.huanying {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(122, 122, 122, 1);
						line-height: 0.75rem;
						text-align: center;
						margin-top: 1.22rem;
					}
				}
			}

			.bg {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 10.1rem;
				}
			}
		}

		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			display: none;
		}
	}

	.van-radio-group {
		display: flex;
		flex-wrap: wrap;
	}

	.van-radio {
		
		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		line-height: 0.75rem;
		margin-right: 1.78rem;
		margin-bottom: 1.84rem;
		&:nth-child(4n),&:nth-child(5n){
			margin-bottom: 0;
		}
	}

	.van-checkbox {
		font-size: 0.81rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(66, 66, 66, 1);
		margin: 0.78rem 0;
	}
</style>
